<template>
  <view class="head-wrap-components" :style="[wrapStyle, componentsStyle]">
    <image class="background-image" :style="[imageStyle]" :src="imageSrc" v-if="mode === 'image'"></image>
    <view class="head-inner" :style="[innerStyle]"><slot></slot></view>
    <view class="head-placeholder" :style="[placeholderStyle]" v-if="fixed"></view>
  </view>
</template>

<script>
/**
 * head-wrap 头部容器组件
 * @description 主要用于禁用导航栏时，做顶部图片固定
 * @property {String} mode 显示类型 color-背景色 image-背景图片
 * @property {Boolean} fixed 是否固定定位
 * @property {Number, String} height 容器的高度
 * @property {Number} immersive 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效（默认false）
 * @property {Number} offsetTop 顶部高度补偿，在fixed下生效
 * @property {String} imageSrc 图片地址
 * @property {String} bgColor 背景颜色
 * @property {Number, String} zIndex 组件显示层级
 * @example <head-wrap fixed mode="image" height="320" image-src=""></head-wrap>
 */

import mixins from '@/mixins/components.js';
export default {
  name: 'head-wrap',
  mixins: [mixins],
  props: {
    mode: {
      type: String,
      default: 'image'
    },
    fixed: {
      type: Boolean,
      default: false
    },
    statusBar: {
      type: Boolean,
      default: true
    },
    height: {
      type: [Number, String],
      default: 100
    },
    align: {
      type: String,
      default: ''
    },
    justify: {
      type: String,
      default: ''
    },
    direction: {
      type: String,
      default: ''
    },
    immersive: {
      type: Boolean,
      default: false
    },
    offsetTop: {
      type: [Number, String],
      default: 0
    },
    imageSrc: {
      type: String,
    },
    bgColor: {
      type: String,
      default: 'transparent'
    },
    zIndex: {
      type: [String, Number],
      default: 10
    }
  },
  computed: {
    componentsStyle() {
      let style = {};
      style.zIndex = this.zIndex;
      return style;
    },
    imageStyle() {
      let style = {};
      style.height = this.$transRpx(this.height);
      style.position = this.fixed ? 'fixed' : 'absolute';
      return style;
    },
    innerStyle() {
      let style = {};
      style.height = this.$transRpx(this.height);
      style.position = this.fixed ? 'fixed' : 'relative';
      style.background = this.bgColor;
      style.paddingTop = this.statusBarHeight + uni.upx2px(this.offsetTop) + 'px';
      style['align-items'] = this.align;
      style['flex-direction'] = this.direction;
      style['justify-content'] = this.justify;
      return style;
    },
    placeholderStyle() {
      let style = {};
      if (this.immersive && this.statusBar) {
        style.height = `calc(${this.statusBarHeight}px + ${this.$transRpx(this.offsetTop)})`;
      } else if (this.immersive) {
        style.height = this.$transRpx(this.offsetTop);
      } else {
        style.height = `calc(${this.$transRpx(this.height)} + ${this.$transRpx(this.offsetTop)})` ;
      }
      return style;
    }
  }
};
</script>

<style scoped lang="scss">
.head-wrap-components {
  width: 100%;
  display: flex;
  position: relative;
  .head-inner {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
  }
  .background-image {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
  }
  .head-placeholder {
    width: 100%;
  }
}
</style>
